<template>
  <view class="wrap" >
    <view class="header">
      <view class="userinfo" >
        <view class="image">
          <!-- <image :src="avatarUrl"></image> -->
          <u-avatar size="80" :src="avatarUrl()"></u-avatar>
        </view>
        <view class="info" style="flex:1;display: flex;justify-content: space-between;">
          <view>
            <view class="username">请假</view>
            <view class="usercode">{{message.sendName}}</view>
          </view>
          <view v-if="message.status ==0">
            <u-tag text="待审核" shape="circle" type="warning" style="height: 55rpx;" />
          </view>
          <view v-if="message.status ==1">
            <u-tag text="已审核" shape="circle" type="success" style="height: 55rpx;" />
          </view>
          <view v-if="message.status ==2">
            <u-tag text="审核失败" shape="circle" type="error" style="height: 55rpx;" />
          </view>
        </view>
      </view>
    </view>
    <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
    <!-- 当前套餐 -->
    <view v-if="current === 0">
      <u-form  class="apply-form-field">
      <u-gap height="18" bg-color="#f5f5f5"></u-gap>
      <u-cell-group class="datails-examine">
        <u-cell-item title="请假类型" label="事假" :arrow="false" :border-bottom="false"></u-cell-item>
        <u-cell-item title="开始时间" :label="message.startTime" :arrow="false" :border-bottom="false"></u-cell-item>
        <u-cell-item title="结束时间" :label="message.endTime" :arrow="false" :border-bottom="false"></u-cell-item>
        <u-cell-item title="请假事由" :label="message.info_content" :arrow="false" :border-bottom="false"></u-cell-item>
      </u-cell-group>
      <u-gap height="11" bg-color="#f5f5f5"></u-gap>
      <u-form-item label="审批流程" label-width="150">
      </u-form-item>
      <u-form-item :border-bottom="false" style="padding: 10px">
        <u-time-line>
          
          <u-time-line-item nodeTop="15">
            <!-- 此处自定义了左边内容，用一个图标替代 -->
            <template v-slot:node>
              <view class="u-node" style="background: #0190ef;">
                <!-- 此处为uView的icon组件 -->
                <u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
              </view>
            </template>
            <!-- <template v-for="(item, index) in leaveList" :key="index" v-slot:content> -->
            <template v-slot:content>
              <view>
                <view class="u-order-title">发起申请</view>
              </view>
            </template>
          </u-time-line-item>

          <u-time-line-item nodeTop="2">
            <!-- 此处自定义了左边内容，用一个图标替代 -->
            <template v-slot:node>
              <view class="u-node" style="background: #ffffff;">
                <!-- 此处为uView的icon组件 -->
                <u-icon name="account-fill" :size="50"></u-icon>
              </view>
            </template>
            <!-- <template v-for="(item, index) in leaveList" :key="index" v-slot:content> -->
            <template v-slot:content>
              <view>
                <view class="u-order-title">{{vuex_user.nickName}}</view>
                <!-- <view class="u-order-time">2019-05-08 12:12</view> -->
              </view>
            </template>
          </u-time-line-item>


 


          <u-time-line-item nodeTop="15">
            <!-- 此处自定义了左边内容，用一个图标替代 -->
            <template v-slot:node>
              <view class="u-node" style="background: #0190ef;">
                <!-- 此处为uView的icon组件 -->
                <u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
              </view>
            </template>
            <!-- <template v-for="(item, index) in leaveList" :key="index" v-slot:content> -->
            <template v-slot:content>
              <view>
                <view class="u-order-title">审批人</view>
              </view>
            </template>
          </u-time-line-item>

          <u-time-line-item nodeTop="2" v-for="(item, index) in myTeacherSet">
            <!-- 此处自定义了左边内容，用一个图标替代 -->
            <template v-slot:node>
              <view class="u-node" style="background: #ffffff;">
                <!-- 此处为uView的icon组件 -->
                <u-icon name="account-fill" :size="50"></u-icon>
              </view>
            </template>
            <!-- <template v-for="(item, index) in leaveList" :key="index" v-slot:content> -->
            <template v-slot:content >
              <view style="display: flex;white-space: nowrap;">
                <view class="u-order-title" style="flex: 1;">{{item.teacherName}}</view>
   
      <!--         <view  style="margin-left: 420rpx;flex: 1;font-size: 28rpx;white-space: nowrap;" :class="Leavecondition(item.status)">{{messageStatus(item.status)}}</view> -->
               
               <view v-if="item.status ==0">
                 <u-tag text="等待审核" shape="circle" type="warning"  style="margin-left: 400rpx;font-size: 30rpx" />
               </view>
               <view v-if="item.status ==1">
                 <u-tag text="审核成功" shape="circle" type="success"    style="margin-left: 400rpx;font-size: 30rpx"/>
               </view>
               <view v-if="item.status ==2">
                 <u-tag text="审核失败" shape="circle" type="error"   style="margin-left: 400rpx;font-size: 30rpx;"  />
               </view>
               
              </view>
              
              
              
              
              
              
              
              
    
              
              
              
              
              
              
              
              
              
              
              
              
              
            </template>
          </u-time-line-item>





        </u-time-line>
      </u-form-item>
      </u-form>


      




    </view>
  </view>


  </view>
</template>
<script>
  export default {
    data() {
      return {
        show: false,
        list: [{
          name: '申请详情'
        }],
        message_content: '',
        message: '',
        m2mSimflowList: [],
        m2mOrderFlowList: [],
        current: 0,
        myTeacherSet: [],
        status: 'loadmore',
        iconType: 'circle',
        isDot: false,
        loadText: {
          loadmore: '点击加载更多',
          loading: '正在加载...',
          nomore: '没有更多了'
        },
      }
    },
    onLoad(options) {
      // 解析传递的对象
      const a = JSON.parse(options.query.data)
      this.message = a
      this.$u.api.message_info_id({
        "message_info_id": a.message_info_id
      }).then(response => {
        if (response.code == 200) {
          this.myTeacherSet = response.data
          
          

      
      }})
      
      
    },
    

    methods: {
      
      messageStatus(status){
        if(status == 0){
          return '待审核'
        }else if(status ==1){
          return '审核通过'
        }
        else if(status == 2 ){
          return '审核失败'
        }
        
      },
      //修改请假消息状态
      updateStutes() {
        this.$u.api.updateLeaveMessage(this.message).then(response => {
          if (response.code == 200) {
            uni.navigateBack({
              delta: 1, // 返回的页面数，1 表示返回上一个页面，2 表示返回上两个页面，以此类推

            });
    let msg = {
     	warningTypeStr: "通知消息",
     	projectName: "现在",
     	description: "审核成功",
       messageImage: ''
     };
    this.createAlarm(msg, res => {
     });

          } else {
         let msg = {
          	warningTypeStr: "通知消息",
          	projectName: "现在",
          	description: "审核失败",
            messageImage: ''
          };
         this.createAlarm(msg, res => {
          });

          }


        })
      },
      confirm() {
        this.$u.api.updateRefuseLeave({
          messageId: this.message.messageId,
          messageContent: this.message_content
        }).then(response => {
          if (response.code == 200) {
            uni.navigateBack({
              delta: 1, // 返回的页面数，1 表示返回上一个页面，2 表示返回上两个页面，以此类推

            });
        let msg = {
         	warningTypeStr: "通知消息",
         	projectName: "现在",
         	description: "审核成功",
           messageImage: ''
         };
        this.createAlarm(msg, res => {
         });

          } else {
          let msg = {
           	warningTypeStr: "通知消息",
           	projectName: "现在",
           	description: "审核失败",
             messageImage: ''
           };
          this.createAlarm(msg, res => {
           });

          }

        })





      },
      Leavecondition(item){
        console.log(item)
        if(item == 1){
          return 'greenTitle'
        }else if(item == 2){
           return 'redTitle'
        }else if(item == 0){
           return 'orangeTitle'
        }
      },
      avatarUrl(){
        return this.vuex_config.imgUrl +'/dev-api'+this.vuex_user.avatar;
      },
      change(index) {
        this.current = index;
      },
      navTo(url) {
        uni.navigateTo({
          url: url
        });
      }
    }

  }
</script>
<style lang="scss" scoped>
  page {
    background-color: #f5f5f5;
  }
  .greenTitle{
    color: '#58ca93';
  }
  .redTitle{
    color: '#ca243a';
  }
  .orangeTitle{
     color: '#f28c03';
  }

  .slot-content {
    font-size: 28rpx;
    padding-left: 30rpx;
  }

  .wrap .search {
    background: #ffffff;
  }
  .cellView {
    margin-top: 8px;
    margin-left: 8px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 2px;
    padding: 0px 4px !important;
    font-size: 15px;
    width: 150rpx;
    color: #4272FF;
    background: #F3F4F6;
  }
  .apply-text {
    font-size: 28rpx;
    color: #333333;

    span {
      color: #999999;
    }
  }

  .user-images {
    width: 28px;
    height: 28px;
    margin-right: 8px;
  }

  .apply-list-foot {
    font-size: 28rpx;
  }

  .personnel-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .personnel-user {
      position: relative;
      margin: 5px 9px 0;
    }

    .user-images {
      width: 32px;
      height: 32px;
      margin-right: 0;

    }

    .iconfont {
      position: absolute;
      top: -12px;
      right: -5px;
      color: #FE0100;
    }
  }

  .bottom-boxs {
    position: fixed;
    z-index: 99;
    background: #ffffff;
    height: 92rpx;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #ededed;

    .number-text {
      color: #333333;
      font-size: 20rpx;

      em {
        font-style: normal;
        color: #ff4400;
        font-size: 36rpx;
      }
    }
  }

  .header {
    background-color: #ffffff;

    .userinfo {
      display: flex;
      padding: 20rpx 20rpx 3rpx;

      .image {
        flex-shrink: 0;
        width: 80rpx;
        height: 80rpx;

        image {
          border-radius: 100%;
          width: 100%;
          height: 100%;
        }
      }

      .info {
        display: flex;
        flex-flow: wrap;
        padding-left: 30rpx;
        color: #333333;

        .username {
          width: 100%;
          font-size: 32rpx;
        }

        .usercode {
          padding: 0;
          font-size: 24rpx;
          color: #999999;
        }
      }
    }

    .logout {
      flex-shrink: 0;
      position: absolute;
      right: 70rpx;
      top: 65rpx;

      .u-btn {
        font-size: 30rpx;
      }
    }
  }

  .u-node {
    width: 44rpx;
    height: 44rpx;
    border-radius: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #d0d0d0;
  }

  .u-order-title {
    color: #333333;
    font-weight: bold;
    font-size: 30rpx;
  }

  .u-order-desc {
    color: rgb(150, 150, 150);
    font-size: 28rpx;
    margin-bottom: 6rpx;
  }

  .u-order-time {
    color: rgb(200, 200, 200);
    font-size: 26rpx;
  }
</style>